<template>
  <div class="service">
    <div class="onlineTime">在线客服（9：00-18：00）</div>
    <div class="tel">热线电话：020-89814314</div>
    <!-- 聊天内容界面 -->
    <div class="post" ref="post">
      <div
        :class="[item.user === 1 ? 'msg-user' : 'msg-ser']"
        v-for="(item, index) in msgList"
        :key="index"
      >
        {{ item.msg }}
      </div>
    </div>
    <!-- 底部输入框 -->
    <div class="bottom">
      <input type="text" v-model="msg" @keyup.enter="sendMsg"/>
      <div class="size-icon" @click="sendMsg">
        <i class="el-icon-s-promotion"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      msg: "",
      // 0表示客服回答，1表示用户输入
      msgList: [
        {
          user: 0,
          msg: "你好，这个怎么用？",
        },
        {
          user: 1,
          msg: "你好，这个免押是怎么免的？",
        },
        {
          user: 1,
          msg: "你好，逾期了该怎么去解决，有多长时间期限",
        },
      ],
    };
  },
  methods: {
    sendMsg() {
      if(this.msg == '') return
      this.msgList[this.msgList.length] = { user: 1, msg: this.msg };
      this.msg = "";
      this.handleScrollBottom()
    },
    // 聊天框窗口接受信息置底
    handleScrollBottom() {
      this.$nextTick(() => {
        let msg = this.$refs.post// 获取对象
        msg.scrollTop = msg.scrollHeight // 滚动高度
      })
    }
  },
};
</script>
<style scoped>
.service {
  width: 20%;
  position: absolute;
  background-color: #fff;
  border-radius: 0.1rem;
  left: 75%;
  top: 85%;
  z-index: 999;
}
.service::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  border-left: solid 0.1rem transparent;
  border-right: solid 0.1rem transparent;
  border-bottom: solid 0.1rem rgb(229, 0, 18);
  bottom: 100%;
  left: 45%;
}
.onlineTime {
  padding: 7% 0 7% 5%;
  background-color: rgb(229, 0, 18);
  border-radius: 0.1rem 0.1rem 0 0;
  color: #fff;
  font-size: 0.14rem;
}
.tel {
  padding: 4% 0 4% 5%;
  background-color: rgb(226, 226, 226);
}
.post {
  width: 100%;
  min-height: 1.7rem;
  max-height: 1.7rem;
  overflow: auto;
  padding: 0 5%;
  box-sizing: border-box;
}
.msg-user {
  background-color: rgb(56, 56, 56);
  border-radius: 0.1rem;
  color: #fff;
  max-width: 70%;
  padding: 4% 3%;
  margin: 5% 0 5% 20%;
  position: relative;
}
.msg-ser {
  background-color: rgb(226, 226, 226);
  border-radius: 0.1rem;
  max-width: 70%;
  padding: 4% 3%;
  margin: 5% 0 5% 0;
  position: relative;
}
.msg-user::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-top: solid 0.05rem transparent;
  border-bottom: solid 0.05rem transparent;
  border-left: solid 0.05rem rgb(56, 56, 56);
  left: 99%;
  top: 30%;
}
.msg-ser::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-top: solid 0.05rem transparent;
  border-bottom: solid 0.05rem transparent;
  border-right: solid 0.05rem rgb(226, 226, 226);
  right: 99%;
  top: 30%;
}
.bottom {
  padding: 4% 0 4% 5%;
  background-color: rgb(56, 56, 56);
  border-radius: 0 0 0.1rem 0.1rem;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.bottom input {
  width: 60%;
  outline: none;
  border: none;
}
.size-icon {
  font-size: 0.2rem;
  color: #fff;
  margin-left: 2%;
}
</style>